<template>
  <div v-loading.fullscreen.lock="$store.getters.loading">
    <el-card>
      <!--搜索框-->
      <hw-search-form
          :searchForm.sync="searchForm"
          :pageNo.sync="page.pageIndex"
          :getTableList="getTableList"
          class="mb20"
      >
        <template #searchFormItem>
          <el-form-item label="上报日期">
            <el-date-picker
                v-model="searchForm.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </template>
      </hw-search-form>
      <!--      添加按钮-->
      <el-row type="flex" justify="end">
        <el-col :span="1.5">
          <el-button
              type="primary"
              class="mb20"
              size="mini"
              plain
              icon="el-icon-plus"
              @click="handlerAdd"
          >新增上报
          </el-button>
        </el-col>
      </el-row>
      <!--列表数据-->
      <hw-table
          :data="tableList"
          :page-no="page.pageIndex"
          :page-size="page.pageSize"
          stripe
          row-key="id"
      >
        <template #tableColumn>
          <el-table-column
              label="上报日期"
              prop="addTime"
              align="center"
          ></el-table-column>
          <el-table-column
              label="标题"
              prop="title"
              align="center"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template #default="scope">
              <el-button size="mini" plain @click="showDetail(scope.row)"
              >详情
              </el-button>
              <el-button size="mini" plain @click="showModify(scope.row)"
              >编辑
              </el-button>
              <el-button size="mini" plain @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </hw-table>
      <!--分页-->
      <hw-pagination
          :total="page.total"
          :page.sync="page.pageIndex"
          :limit.sync="page.pageSize"
          @pagination="getTableList"
      />
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getTableListApi } from "@/api/school/drinkWaterReport/directDrinkWater";

export default {
  name: "BasicPage",
  data() {
    return {
      searchForm: {},
      tableList: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      submitForm: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  computed: {
    ...mapGetters([`allDictionary`]),
  },
  created() {
    this.getTableList();
  },
  methods: {
    // 列表数据
    getTableList() {
      let startTime;
      let endTime;
      if (this.searchForm.date && this.searchForm.date.length > 0) {
        startTime = this.$dayjs(this.searchForm.date[0]).format(
            `YYYY-MM-DD 00:00:00`
        );
        endTime = this.$dayjs(this.searchForm.date[1]).format(
            `YYYY-MM-DD 23:59:59`
        );
      }
      getTableListApi({
        page: this.page,
        ...this.searchForm,
        date: undefined,
        startTime,
        endTime,
      }).then((response) => {
        this.tableList = response.data.list;
        this.page.total = response.data.total;
      });
    },
    //新增按钮
    handlerAdd() {

    },
    // 显示详情
    showDetail(row) {
      console.log(row);
    },
    // 打开编辑弹框
    showModify(row) {
      console.log(row);
    },
    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // batchDeleteDataApi([row.guideId]).then(() => {
        //   this.getTableList();
        // });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
